<template>
  <el-input
    v-model="input"
    placeholder="搜索空间、资源或问题"
    @focus="handleFocus"
    @blur="handleFocus"
    class="header-search"
    :class="moreClasses"
    @keyup.enter.native="goSearch"
  >
    <el-button slot="append" icon="el-icon-search" type="primary" @click="goSearch" />
  </el-input>
</template>

<script>
export default {
  name: 'HeaderSearch', // 页头的搜索框
  data() {
    return {
      input: '',
      moreClasses: '',
    };
  },
  methods: {
    goSearch() {
      this.$router.push(`/search?title=${this.input.trim()}`);
    },
    handleFocus({ type }) {
      if (type === 'focus' && window.innerWidth > 1200) {
        this.moreClasses = 'be-longer';
      } else {
        this.moreClasses = '';
      }
    },
  },
};
</script>

<style></style>
